<script>
	export default {
		data() {
			return {
				isRead: false,
				shiyong: false,
				yinsi: false,
				formData: {
					email: "", //邮箱
					id_card: "", //身份证
					mobile: "", //手机号
					openid: "", //openid
					unionid: "", //unionid
					username: "", //用户名
				}
			}
		},
		computed: {
			basicData() {
				return this.$store.state.basicData
			}
		},
		methods: {
			async submit() {
				if (!this.isRead) {
					return this.toast("请阅读协议并勾选同意")
				}
				if (!this.formData.openid) {
					return this.toast("请点击微信授权")
				}

				const res = await this.http("post", "/api/index/register", this.formData)
				if (res.code == 200) {
					uni.showToast({
						title: res.message,
						icon: "none"
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				}else{
					uni.showToast({
						title: res.message,
						icon: "none"
					})
					if(res.message=='请不要重复提交'){
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					}
				}
				
			},
			wechatLogin() {
				uni.showLoading({
					title: "正在授权",
					mask: true
				})
				uni.login({
					provider: "weixin",
					success: async e => {
						const res = await this.http("post", "/api/index/getOpenid", {
							code: e.code
						})
						const {
							openid,
							session_key,
							unionid
						} = res.data;
						if (!openid) {
							uni.showToast({
								title: "微信授权登录失败",
								icon: "none"
							})
							return
						}
						this.formData.openid = openid
						uni.hideLoading()
					}
				})
			},
			getPhoneNumber(e) {
			  var that = this
			  // 检查用户是否授权成功
			  if (e.detail.errMsg === 'getPhoneNumber:ok') {
				// 获取加密数据和加密向量
				const encryptedData = e.detail.encryptedData;
				const iv = e.detail.iv;
		
				// 获取用户登录凭证 code
				
					  // 调用后端接口，将 code、encryptedData 和 iv 发送给后端
					  uni.request({
						url: 'https://app.yinuoxinnengyuan.cn/api/index/get_phone',
						method: 'POST',
						data: {
						  code: e.detail.code,
						  encryptedData: encryptedData,
						  iv: iv
						},
						success: (res) => {
							console.log(res)
						  // 处理后端返回的结果
						  if (res) {
							// 获取手机号成功
							const phoneNumber = res.data;
							that.formData.mobile = phoneNumber
							console.log('用户手机号：', phoneNumber);
							// 这里可以进行后续操作，比如保存手机号到本地存储
							uni.setStorageSync('phoneNumber', phoneNumber);
							// 提示用户绑定成功
							uni.showToast({
							  title: '手机号授权成功',
							  icon: 'success'
							});
						  } else {
							// 获取手机号失败
							uni.showToast({
							  title: '获取手机号失败，请稍后重试',
							  icon: 'none'
							});
						  }
						},
						fail: (err) => {
						  // 请求接口失败
						  console.error('请求接口失败：', err);
						  uni.showToast({
							title: '网络请求失败，请检查网络',
							icon: 'none'
						  });
						}
					  });
					
				  
			  } else {
				// 用户拒绝授权
				console.log('用户拒绝授权获取手机号');
				uni.showToast({
				  title: '你拒绝了授权，无法获取手机号',
				  icon: 'none'
				});
			  }
			}
			  
		}
	}
</script>

<template>
	<view class="p-30 between flex-col" style="align-items: stretch;">
	<!-- 	<div style="word-break: break-all;">
			{{JSON.stringify(formData)}}
		</div> -->

		<div class="mask" v-show="shiyong" style="align-items: flex-end;">
			<div class="w-full p-30 bg-white" style="max-height: 80vh; overflow:auto">
				<div>
					<div class="center fz30 font-bold">
						{{basicData.privacy.title}}
					</div>
					<div class="mt-30" v-html="basicData.privacy.content"></div>
				</div>
				<button class="mt-50" @click="shiyong=false">关闭</button>
			</div>
		</div>

		<div class="mask" v-show="yinsi" style="align-items: flex-end;">
			<div class="w-full p-30 bg-white" style="max-height: 80vh; overflow:auto">
				<div>
					<div class="center fz30 font-bold">
						{{basicData.agreement.title}}
					</div>
					<div class="mt-30" v-html="basicData.agreement.content"></div>
				</div>
				<button class="mt-50" @click="yinsi=false">关闭</button>
			</div>
		</div>


		<div>
			<div class="center shadow rounded-16 h-140" @click="wechatLogin">
				<image src="/static/icon/wechat.png" class="w-70" mode="widthFix"></image>
				<div class="text-green fz48 font-bold ml-40">
					{{formData.openid?"已授权":"点击前往微信授权"}}
				</div>
			</div>

			<!-- 	<div class="flex shadow rounded-16 h-140">
				<image src="/static/icon/wechat.png" class="w-70 h-70 bg-orange rounded-full ml-50" mode="aspectFill">
				</image>
				<div class="text-gray-600 fz48 font-bold ml-40">微信昵称</div>
			</div> -->

			<div class="shadow mt-20 p-20 rounded-16">
				<div class="font-bold fz36" style="position: relative;">
					手机号
					<button  open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" style="background-color: transparent;color: #3662EC; position: absolute; top: -10px; left: 51%;">点击授权手机号</button>
				</div>
				<input type="number" maxlength="11" v-model="formData.mobile" placeholder="请输入手机号" placeholder-style="color:#A6A6A6"
					class="mt-20">
			</div>

			<div class="shadow mt-20 p-20 rounded-16">
				<div class="font-bold fz36">姓名</div>
				<input type="text" placeholder="请输入身份证上的姓名" v-model="formData.username"
					placeholder-style="color:#A6A6A6" class="mt-20">
				<div class="font-bold fz36 mt-20">身份证号</div>
				<input type="text" placeholder="请输入正确的身份证号" v-model="formData.id_card" placeholder-style="color:#A6A6A6"
					class="mt-20">
			</div>

			<div class="shadow mt-20 p-20 rounded-16">
				<div class="font-bold fz36">邮箱</div>
				<input type="text" placeholder="请输入邮箱" v-model="formData.email" placeholder-style="color:#A6A6A6"
					class="mt-20">
			</div>

			<!-- <div class="center shadow rounded-16 h-140 mt-20">
				<image src="/static/icon/auth.png" class="w-80" mode="widthFix"></image>
				<div class="text-blue fz48 font-bold ml-40">点击前往实名认证</div>
			</div>

			<div class="flex shadow rounded-16 h-140 mt-20">
				<image src="/static/icon/auth.png" class="w-80 ml-50" mode="widthFix"></image>
				<div class="text-blue fz48 font-bold ml-40">已实名</div>
			</div> -->

			<div class="mt-40 shadow h-80 center fz38 font-bold bg-orange text-white rounded-16" @click="submit">确认完成
			</div>

		</div>

		<div class="mt-50">
			<div class="text text-gray-900 fz30 between items-start">
				<radio :checked="isRead" @click="isRead=!isRead" class="mr-15" />
				<div class="div">
					我已阅读并同意 <text class="text-blue" @click="shiyong=true">《泊车充电用户使用协议》</text>
					和
					<text class="text-blue" @click="yinsi=true">《泊车充电隐私政策》</text> ，
					未注册的手机号在登录后将自动为您创建账号。
				</div>
			</div>
			<image src="/static/pic/login-car.png" mode="widthFix" class="w-full" style="opacity: 0.2;"></image>
		</div>

	</view>
</template>



<style>
	button:active {
	  outline: none;
	}
	button {
	  box-shadow: none; /* 初始状态下没有阴影 */
	}
	button:focus {
	  outline: none;
	}
	button {
	  -webkit-tap-highlight-color: transparent; /* iOS上点击时的背景高亮 */
	}
	button::after{
		border: none;
	}
	.mask {
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 10;
	}
</style>